<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@page import = "com.itheima.po.User"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>

   <!--- basic page needs
   ================================================== -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>个人信息</title>
	<meta name="description" content="">  
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	
	<meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="robots" content="all">

   <!-- mobile specific metas
   ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 	<!-- CSS
   ================================================== -->
   <link rel="stylesheet" href="../css/base.css">
   <link rel="stylesheet" href="../css/vendor.css">  
   <link rel="stylesheet" href="../css/main.css">        

   <!-- script
   ================================================== -->
	<script src="../js/modernizr.js"></script>
	<script src="../js/pace.min.js"></script>
	<script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
    

   <!-- favicons
	================================================== -->
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">

</head>

<body id="top">

	<!-- header 
   ================================================== -->
<header class="short-header">
            <div class="gradient-block"></div>
            <div class="row header-content">
                <div class="logo">
                    <a href="../index.jsp">Author</a>
                </div>
                <nav id="main-nav-wrap">
                    <ul class="main-navigation sf-menu">
                        <li><a href="../index.jsp" title="">Home</a></li>
                        <li class="has-children">
                            <a href="javascript:void(0)" title="">Categories</a>
                            <ul class="sub-menus">
                                <li><a href="javascript:void(0)" class="sub-menu">文学</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">艺术</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">小说</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">心理</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">经济</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">管理</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">理财</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">少儿</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">科学</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">医学</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">教辅</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">外语</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">政治</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">法律</a></li>
                                <li><a href="javascript:void(0)" class="sub-menu">计算机</a></li>
                            </ul></li>
                            <li><a href="about.jsp">About</a></li>
                            <li class="current"><a href="contact.jsp">Contact</a></li>
                            <li><a href="login.jsp">Login</a></li>
                        </ul>
                    </nav>
                    <!-- end main-nav-wrap -->
                    <div class="search-wrap">
                        <form role="search" method="get" class="search-form"
					action="searchResults.jsp">
					<label> <span class="hide-content">Search for:</span> <input
						type="search" class="search-field" id="keys"
						placeholder="Type Your Keywords" value="" name="s"
						title="Search for:" autocomplete="off">
					</label> <input type="submit" class="search-submit" value="Search">
				</form>
                        <a href="javascript:void(0)" id="close-search" class="close-btn">Close</a>
                    </div>
                    <!-- end search wrap -->
                    <div class="triggers">
                        <a class="search-trigger" href="javascript:void(0)"><i class="fa fa-search"></i></a>
                        <a class="menu-toggle" href="javascript:void(0)"><span>Menu</span></a>
                    </div>
                    <!-- end triggers -->
                </div>
            </header> <!-- end header -->


   <!-- content
   ================================================== -->
   <section id="content-wrap" class="site-page">
   	<div class="row">
   		<div class="col-twelve">

   			<section>  

					<div class="primary-content">

						<h1 class="entry-title add-bottom">YOUR MESSAGE.</h1>	
						
						 <div class="yc-upload-wrap">
	<div class="yc-upload-box">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">
					
					<div class="ycupload-mainbox">
						<div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">
							<span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">
								&middot;
							</span>
						</div>
						<div class="ycupload-line"></div>
						<div style="height:30px;"></div>
						<div  style="min-height:1px;">
							<div class="container">
								<div class="row">
									<div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
										<!--<a href="javascript:void(0);" class="cover-uploadBtn">
											<img src="img/yc_uploadimg_06.png">
											<div id="clipArea"></div>
											<input type="file" id="file">
											<button id="clipBtn">截取</button>
										</a>
										<div id="view"></div>-->
										<div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
											<div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">	
												<div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
													<div id="clipArea" style="margin:10px;height: 520px;"></div>
													<div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
														<button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存头像</button>
													</div>
												</div>
											</div>
											<div id="view" style="width:214px;height:160.5px;" title="请上传 428*321 的头像图片"></div>
											<div style="height:10px;"></div>
											<div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
												点击上传头像
												<input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
											</div>
										</div>
										
										
									</div>
								</div>
							</div>
							
						</div>
						<div style="height:25px;"></div>
					</div>
					
				</div>
			</div>
		</div>
		
	</div>
</div>


<script type="text/javascript">

//上传头像
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
	size: [428, 321],// 截取框的宽和高组成的数组。默认值为[260,260]
	outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
	//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
	file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
	view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
	ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
	loadStart: function() {
		// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
		$('.cover-wrap').fadeIn();
		console.log("照片读取中");
	},
	loadComplete: function() {
		 // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
		console.log("照片读取完成");
	},
	//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
	clipFinish: function(dataURL) {
		 // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
		$('.cover-wrap').fadeOut();
		$('#view').css('background-size','100% 100%');
		console.log(dataURL);
	}
});
//clipArea.destroy();
</script>


						<form name="cForm" id="cForm" method="post" action="">
	  					   <fieldset>

	                     <div class="form-field">
	  						      <input name="cName" type="text" id="cName" class="full-width" placeholder="昵称" value="">
	                     </div>
	                     
	                     <div class="form-field">
	  						      <input name="cAge" type="text" id="cAge" class="full-width" placeholder="年龄" value="">
	                     </div>
	                     
	                     <div class="form-field">
	  						      <input name="cConstellation" type="text" id="cConstellation" class="full-width" placeholder="星座" value="">
	                     </div>
	                     
	                     <div class="form-field">
	  						      <input name="cOccupation" type="text" id="cOccupation" class="full-width" placeholder="职业" value="">
	                     </div>
	                     
	                     <div class="form-field">
	  						      <input name="cHobby" type="text" id="cHobby" class="full-width" placeholder="兴趣爱好" value="">
	                     </div>

	                     <div class="form-field">
	  						      <input name="cEmail" type="text" id="cEmail" class="full-width" placeholder="邮箱" value="">
	                     </div>
	                     
	                     <div class="form-field">
	  						      <input name="cAddress" type="text" id="cAddress" class="full-width" placeholder="现居地" value="">
	                     </div>

	                     <div class="message form-field">
	                        <textarea name="cMessage" id="cMessage" class="full-width" placeholder="个人签名" ></textarea>
	                     </div>


	                     <button type="submit" class="submit button-primary full-width-on-mobile">Submit</button>

	  					   </fieldset>
  				      </form> <!-- end form -->

				</section>
   		

			</div> <!-- end col-twelve -->
   	</div> <!-- end row -->		
   </section> <!-- end content -->

   
   <!-- footer
   ================================================== -->
   <footer>



      <div class="footer-bottom">
      	<div class="row">

      		<div class="col-twelve">

		         <div id="go-top">
		            <a class="smoothscroll" title="Back to Top" href="#top"><i class="icon icon-arrow-up"></i></a>
		         </div>         
	      	</div>

      	</div> 
      </div> <!-- end footer-bottom -->  

   </footer>  

   <div id="preloader"> 
    	<div id="loader"></div>
   </div> 

   <!-- Java Script
   ================================================== --> 
   <script src="../js/jquery-2.1.3.min.js"></script>
   <script src="../js/plugins.js"></script>
   <script src="http://maps.google.com/maps/api/js?v=3.13&amp;sensor=false"></script>
   <script src="../js/main.js"></script>  
   <script src="../js/test.js"></script>

</body>

</html>



    